<?php
// Se retoma la session.
session_start();
// Se establecen cookies de session para http o https
setcookie(session_name(), session_id(), NULL, NULL, NULL, 0);
setcookie(session_name(), session_id(), NULL, NULL, NULL, 1);
?>
<style>
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
</style>
<style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    img{ border: 0; }

    .contentMap{
        width: 630px;
        border: 0px solid #336699;
        max-height:415px;
        overflow:auto;
    }
    .contentImg{
        float: left;
        width: 300px;
        margin-right: 10px;
        text-align: center;
    }
    .contentImg a{
        color: #369;
        font-size: 12px;
    }
    .contentTxt{
        float: left;
        width: 300px;
    }
    .clear{ clear: both; }
</style>
<link rel="stylesheet" type="text/css" href="../../css/kickstart.css" media="all" /> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="../../js/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
    var myLatlng1 = "";
    var myPosition = "";
    var map = "";
 $(document).ready(function(){
     
     //Posicion central segun mi ubicacion
        if(navigator.geolocation) {
            
            //var myLatlng1 = new google.maps.LatLng((9.9358245+10.0151759+10.2160929+10.3621605)/4,(-84.0784551-84.2140615-83.7867463-83.7329742)/4);
            navigator.geolocation.getCurrentPosition(function(position) {
                        
                myLatlng1 = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                myPosition = new google.maps.Marker({
                    position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
                    map: map,
                    title: 'Yo estoy aqui !' + position.coords.latitude +","+ position.coords.longitude,
                    animation: google.maps.Animation.DROP,//BOUNCE   
                    icon:new google.maps.MarkerImage("../../img/PositionUser.png", new google.maps.Size(80, 60), null, new google.maps.Point(0, 30))
                });
                                           

                map.setCenter(myLatlng1);

            });
        }
        
        cargar_Marcas_Pendientes();
 });
 
 function cargar_Marcas_Pendientes()
    {       
        var accion='cargarMarcasPendientes';
        //var fecha = CalcFecha();
        $.get("../../controladores/mapaControlador.php",{accion:accion},function(resultado){
            if(resultado == false)
            {
                alert("Error cargar_Marcas_Pendientes");
            }
            else
            {  
                $('#Prueba').append(resultado);
                   
                   
                
                
            }
        });
    }
</script>
     
    
<script type="text/javascript">
    
    
    function Marcas (latitud,longitud) {
        this.latitud = latitud;
        this.longitud = longitud;
    }
 
    Marcas.prototype.getInfo = function() {
        return this.latitud + ' ' + this.longitud;
    };


	
    function initialize() {
                 
        var index;
        var marcas1 = new Marcas(9.9358245,-84.0784551);
        var marcas2 = new Marcas(10.0151759,-84.2140615);
        var marcas3 = new Marcas(10.2160929,-83.7867463);
        var marcas4 = new Marcas(10.3621605,-83.7329742);
        var vectorMarcas = [marcas1, marcas2, marcas3,marcas4]; 
        var marca = new Marcas();
        //Posicion central segun promedio
        myLatlng1 = new google.maps.LatLng((9.9358245+10.0151759+10.2160929+10.3621605)/4,(-84.0784551-84.2140615-83.7867463-83.7329742)/4);
                
                
        var mapOptions = {
            zoom: 10,
            center: myLatlng1,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

          
              

	
        for	(index = 0; index < vectorMarcas.length; index++) {
            marca = vectorMarcas[index];
            //alert(marca.latitud);
            window["marker" + index] = new google.maps.Marker({
                icon:new google.maps.MarkerImage("http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld="+index+"|5680FC|000000&.png", new google.maps.Size(80, 60), null, new google.maps.Point(0, 30)),
                position: new google.maps.LatLng(marca.latitud,marca.longitud),
                map: map,
                title: 'Hello World! Estas en:' + marca.latitud +","+ marca.longitud,
                animation: google.maps.Animation.DROP//BOUNCE
                        
            });
		
                    

            this["marker" + index]['infowindow'] = new google.maps.InfoWindow({
                //content:"<div id='contentInfoWindow' "+ index + " style='width: 300px; height: 300px; border: 1px solid #000;'>Este cliente esta en:" + marca.latitud +","+ marca.longitud +"</div>"
                content:"<div id='contentInfoWindow'"+index +" class='contentMap'><div class='contentTxt'><h2>San Juan Morro</h2><p>En la cima del Antiguo San Juan, encontrarás al Fuerte San Felipe del Morro, más conocido como El Morro. Esta construcción perteneciente al siglo XVI, fue hecha para proteger a la ciudad de los ataques por mar, siendo uno de los elementos más representativos de la antigua ciudad. Probablemente haya sido el monumento más famoso en los tiempos de las colonias españolas y ahora la fortaleza sobresale en una isleta rocosa.</div><div class='contentImg'><img src='http://www.maestrosdelweb.com/images/2011/04/SanJuan.jpg' title='San Juan Morro' />Autor desconocido <img src='http://www.maestrosdelweb.com/images/2011/04/SanJuan2.jpg' title='San Juan Morro' /><a href='http://www.flickr.com/photos/19114667@N00/2134221308/'>Tomada por blucolt</a></div>"+
                    "	</p> "+
                    "</div>"+
                    "<div class='clear'></div>"+
                    "</div>"
            });

            google.maps.event.addListener(this["marker" + index], 'click', function() {
                this['infowindow'].open(map, this);
            });	
				
        } 
  
    }

   
    google.maps.event.addDomListener(window, 'load', initialize);

</script>


<div id="map-canvas"></div>
<div id="Prueba"><?php echo $_SESSION['nombreAgente'] ?></div>



